<template>
	<view class="content">
		<view class="app-title ac">
			<text class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</text>推送设置
			<!-- <text class="fr"><image class="more" src="/static/img/more.png"></image></text> -->
		</view>

		<Switch></Switch>

		<view class="work-item">
			<view class="item" @click="jumpUrl('')">
				<text class="fl">接收推送通知</text>
				<view class='flex'>
					<switch active-color="#07C160" v-model='checked' ></switch>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import { Switch } from 'vant';
	export default {
		components: {
			Switch
		},
		data() {
			return {
				checked:true,
				tab: 0,
				start: '',
				end: '',
				show_search: false
			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			setTab(i) {
				if (this.tab == i) return;
				this.tab = i;
			},
			closeFull(obj) {
				if (obj) {
					this.start = obj.start;
					this.end = obj.end;
					this.show_date = true;
				}
				this.show_search = false;
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style scoped>
	.my-work {
		background: #fff;
		margin-bottom: 16px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}

	.my-work>.menu {
		width: 37.5%;
		color: #3E3A39;
		line-height: 54px;
		position: relative;
	}

	.my-work>.menu:nth-child(3) {
		border-left: 1px solid #d7d7d7;
		width: 25%;
	}

    
	.my-work>.menu>.on {
		color: #307BE0;
		border-bottom: 2px solid #307BE0;
	}

	.my-work>.menu>.num {
		position: absolute;
		top: 10px;
		right: 20%;
		background: #FA5151;
		width: 15px;
		height: 15px;
		font-size: 10px;
		border-radius: 50%;
		color: #fff;
		line-height: 14px;
	}

	.select {
		width: 15px;
		height: 15px;
		margin-left: 5px;
		vertical-align: middle;
	}

	.work-item {
		width: 91.5%;
		margin: 0 auto;
	}

	.work-item>.item {
		/* line-height: 50px; */
		font-size: 14px;
		margin-top: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		background: #FFFFFF;
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		padding-left: 25px;
		padding-right: 25px;
	}

	.work-item>.item>.line {
		width: 30px;
		height: 8px;
		margin-right: 20px;
		margin-top: 22px;
	}

	.work-item>.item>.total {
		margin: 0 50px;
		height: 50px;
	}

	.work-item>.item .icon {
		width: 20px;
		height: 20px;
		vertical-align: middle;
	}
	
	.flex{
		display: flex;
		width: 60px;
		line-height: 24px;
		flex-direction: column;
		align-items: center;
	}

	.one {
		background: #E93636;
	}

	.two {
		background: #ED983B;
	}

	.three {
		background: #71C76F;
	}

	.four {
		background: #DA8AFF;
	}
</style>
